<template>
    <div class="add-card">
      <header class="add-header">
        <el-page-header content="增加月卡" @back="$router.back()" />
      </header>
      <main class="add-main">
        <div class="form-container">
          <div class="title">车辆信息</div>
          <div class="form">
            
            <el-form ref="hhh" label-width="100px"  :model="form" :rules="rules">
              <el-form-item label="车主姓名" prop="personName">
                <el-input v-model="form.personName" />
              </el-form-item>
              <el-form-item label="联系方式" prop="phoneNumber">
                <el-input v-model="form.phoneNumber"/>
              </el-form-item>
              <el-form-item label="车辆号码" prop="carNumber">
                <el-input v-model="form.carNumber"/>
              </el-form-item>
              <el-form-item label="车辆品牌" prop="carBrand">
                <el-input v-model="form.carBrand"/>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="form-container">
          <div class="title">最新一次月卡缴费信息</div>
          <div class="form">
            <el-form  label-width="100px">
              <el-form-item label="有效日期">
                <!-- 日期选择组件 -->
                <el-date-picker 
                  v-model="form2.cardDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="支付金额" >
                <el-input v-model="form2.paymentAmount"/>
              </el-form-item>
              <el-form-item label="支付方式">
                <el-select v-model="form2.paymentMethod">
                  <!-- <el-option
                    v-for="item in [{}]"
                    :key="item.industryCode"
                    :value="item.industryCode"
                    :label="item.industryName"
                  /> -->
                  <!-- el-option 表示一个选项 label=>描述文字 value=>将来收到的提交给后端 -->
                  <el-option label="支付宝" value="Alipay" />
                  <el-option label="微信" value="WeChat" />
                  <el-option label="现金" value="Cash" />

                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
  
      </main>
      <footer class="add-footer">
        <div class="btn-container">
          <el-button>重置</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </footer>
    </div>
  </template>
  
  <script>
import { addCarCardAPI, getCarCardDetail, editCarCard } from '@/api/car'
  export default {

    data(){
        return{
            form:{//要与后端接口保持一致
                personName: '',
                phoneNumber: '',
                carNumber: '',
                carBrand: ''
            },
            rules:{
                personName:[
                    {required: true, message: '车主姓名必须填写', trigger: 'blur'},//非空校验  trigger:'blur'失焦时触发
                    
                ],
                phoneNumber:[
                    {required: true, message: '联系方式必须填写', trigger: 'blur'},//非空校验
                    
                ],
                carNumber:[
                    {required: true, message: '车辆号码必须填写', trigger: 'blur'},//非空校验
                    
                ],
                carBrand:[
                    {required: true, message: '车辆品牌必须填写', trigger: 'blur'},//非空校验
                    
                ],
            }, 
            form2:{
              cardDate: '',
              paymentAmount: '',
              paymentMethod: ''
            }

        }
    },

    mounted(){
      console.log('页面加载了……')

      //获取地址栏路径中的id参数
      const id = this.$route.query.id
      console.log(id)  //根据id请求后端接口  获取当前页面id数据

      if(id){
        //编辑 => 获取详细数据 显示到页面中
        getCarCardDetail(id).then((res) => {
          //请求成功后触发
          console.log(res)

          //回显数据  把后端响应的数据绑定回表单
          this.form.personName = res.data.personName
          this.form.phoneNumber = res.data.phoneNumber
          this.form.carNumber = res.data.carNumber
          this.form.carBrand = res.data.carBrand

          this.form2.paymentAmount = res.data.paymentAmount
          this.form2.paymentMethod = res.data.paymentMethod
          //添加字段  为编辑使用
          this.form2.carInfoId = res.data.carInfoId
          this.form2.rechargeId = res.data.rechargeId
          //用数组表示时间
          this.form2.cardDate = [res.data.cardStartDate, res.data.cardEndDate]

          //高级写法
          // this.form={
          //   ...res.data
          // }
          // this.form2={
          //   ...res.data
          // }
          // this.form2.cardDate = [res.data.cardStartDate, res.data.cardEndDate]


        })
      }

    },

    methods: {

      //对整体表单进行校验
      submit(){
        this.$refs.hhh.validate((ok) => {
          if(ok) {
            // console.log('请求啦!')

            if(this.$route.query.id){
              //编辑
              console.log('编辑')
              //发送请求更新数据 => 提示=> 跳转回列表
              editCarCard({
                personName: this.form.personName,
                phoneNumber: this.form.phoneNumber,
                carNumber: this.form.carNumber,
                carBrand: this.form.carBrand,

                paymentMethod: this.form2.paymentMethod,
                paymentAmount: this.form2.paymentAmount,

                cardStartDate: this.form2.cardDate[0],
                cardEndDate: this.form2.cardDate[1],

                carInfoId: this.form2.carInfoId,
                rechargeId: this.form2.rechargeId

              }).then((res) => {
                this.$message.success('编辑成功')
                this.$router.push('/parking/card')
              })

            }else{
              addCarCardAPI({//添加月卡信息
              //form中的名字
              personName: this.form.personName,
              phoneNumber: this.form.phoneNumber,
              carNumber: this.form.carNumber,
              carBrand: this.form.carBrand,
              //form2中的名字都要一一对应
              paymentAmount: this.form2.paymentAmount,
              paymentMethod: this.form2.paymentMethod,
              cardStartDate: this.form2.cardDate[0],
              cardEndDate: this.form2.cardDate[1]

            }).then(() => { //请求结束后执行该函数
             
              this.$message.success('添加成功')//跳转回列表页面
              
              this.$router.push('/parking/card')
            }).catch((error) => {
              //请求失败时执行该函数  提示哪里出错
              this.$message.error(error.response.data.msg)
            })
            }
          
          }
        })
      }

    }
  
  }
  </script>
  
  <style scoped lang="scss">
  .add-card {
    background-color: #f4f6f8;
    height: 100vh;
  
    .add-header {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 64px;
      background-color: #fff;
  
      .left {
        span {
          margin-right: 4px;
        }
        .arrow{
          cursor: pointer;
        }
      }
  
      .right {
        text-align: right;
      }
    }
  
    .add-main {
      background: #f4f6f8;
      padding: 20px 130px;
  
      .form-container {
        background-color: #fff;
  
        .title {
          height: 60px;
          line-height: 60px;
          padding-left: 20px;
        }
  
        .form {
          margin-bottom: 20px;
          padding: 20px 65px 24px;
  
          .el-form {
            display: flex;
            flex-wrap: wrap;
  
            .el-form-item {
              width: 50%;
            }
          }
        }
      }
      .preview{
        img{
          width: 100px;
        }
      }
    }
  
    .add-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 24px 50px;
      color: #000000d9;
      font-size: 14px;
      background: #fff;
      text-align: center;
    }
  }
  </style>